<template>
    <div class="in-container">
        <div class="header">
            <router-link to="/">
                <LeftOutlined />&nbsp;返回
            </router-link>
        </div>

        <!-- 标志区域 -->
        <div class="logo">
            <lord-icon src="https://cdn.lordicon.com/efekwdcq.json" trigger="loop" delay="1500"
                style="width:85px; height:85px">
            </lord-icon>
        </div>
        <div class="form">
            <div class="input-item">
                <Input name="用户名" type="text" v-model="username" />
            </div>
            <div class="input-item">
                <Input name="密码" type="password" v-model="password" />
            </div>
            <div class="other-item">
                <lord-icon src="https://cdn.lordicon.com/epzxzayu.json" trigger="loop" delay="1500"
                    colors="primary:#848484" style="width:18px; height:18px">
                </lord-icon>&nbsp;
                <router-link to="/forgot">忘记密码?</router-link>
            </div>
            <div class="input-item">
                <Button @submit-request="handleLoginRequest"></Button>
            </div>
            <div class="other-item">
                <label>没有账户? 请前往
                    <router-link to="/up">注册</router-link>
                </label>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import Input from '../../../components/Input.vue';
import Button from '../../../components/Button.vue';
import { LeftOutlined } from '@ant-design/icons-vue';
import { Login_API } from '../../../api/user.js'
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router'

const router = useRouter()

const username = ref();
const password = ref();
let timer

// 登录请求的处理函数
const handleLoginRequest = async () => {
    const { data: res } = await Login_API(username.value, password.value)
    if (res.code == 200) {
        message.success(res.message);
        localStorage.setItem('token', res.data);
        timer = setTimeout(() => {
            if (window.electron) {
                window.electron.startInvoke()
            } else {
                router.push('/main')
            }
        }, 1500)
    } else {
        username.value = ''
        password.value = ''
        message.error(res.message);
    }
};

onUnmounted(() => {
    clearTimeout(timer)
})
</script>

<style lang="less" scoped>
.in-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #212121;
    position: relative;

    .header {
        width: 100%;
        height: 55px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        top: 0;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 12px;

        a {
            padding-top: 8px;
            color: #727475;
            text-decoration: none;
        }
    }

    .logo {
        display: block;
        text-align: center;
    }

    .form {
        width: 100vw;
        height: auto;
        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .input-item {
            display: block;
            margin: 16px;
        }

        .other-item {
            font-size: 12px;
            color: #727475;
            display: flex;
            align-items: center;

            a {
                font-size: 12px;
                color: #727475;
            }

            a:hover {
                color: #91BBED;
                cursor: pointer;
                border-bottom: 0.6px dashed #727475;
            }
        }
    }
}
</style>